<template>
  <div class="consumer-record-container">
    <!-- 顶部导航栏 -->
    <el-row class="header">
      <el-col :span="12">
        <img class="title" src="@/assets/image/ytj/ywcx2.png" alt="" srcset="">
      </el-col>
      <el-col :span="12" class="logout-tip">
        {{ remainingTime }}  内无操作，将会退出登录
      </el-col>
    </el-row>

    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 消费记录查询标题栏 -->
      <div class="query-header">
        <div class="query-title">
          <img class="query-icon" src="@/assets/image/ytj/tx.png" alt="" srcset="">
          <span style="font-size: 20px;">消费记录查询</span>
        </div>
        <el-select
          v-model="selectedYear"
          placeholder="选择年份"
          class="year-select"
        >
          <el-option
            v-for="year in years"
            :key="year"
            :label="year + '年'"
            :value="year"
          />
        </el-select>
      </div>

      <!-- 年度汇总卡片 -->
      <el-card class="summary-card">
        <div slot="header" class="clearfix">
          <el-row class="header2">
            <el-col :span="4">
              <img class="user" src="@/assets/image/ytj/user.png" alt="" srcset="">
            </el-col>
            <el-col :span="20" class="logout-tip2">
              <el-row>
                <el-col :span="24">
                  <span style="font-weight: bold;color: #303133;font-size: 20px;">{{ OBJ.name }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div style="margin-top: 10px;">
                    <span v-for="(i,k) in OBJ.biaoqian" :key="k" style="background: #6590F3;width: 100%; border-radius: 30px;padding: 5px;padding-left: 10px;padding-right: 10px;margin-right: 10px;">{{ i }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div v-for="(i,k) in list" :key="k" class="hospital-main">
          <div class="visit-type">
            <div class="hospital-name">
              {{ i.name }}
            </div>
            <span class="visit-date">{{ i.riqi }}</span>
          </div>
          <el-divider />
          <div class="expense-details">
            <div class="expense-item">
              <span class="expense-label">账户收入总金额</span>
              <span class="expense-value">{{ i.zongshouru }}</span>
            </div>
            <div class="expense-item">
              <span class="expense-label">账户支出总金额</span>
              <span class="expense-value">{{ i.zongzhichu }}</span>
            </div>
            <div class="expense-item">
              <span class="expense-label">支出付款对象</span>
              <span class="expense-value">{{ i.fukuanduixiang }}</span>
            </div>
          </div>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script>
import { queryFeeList } from '@/api/ytj.js'
export default {
  data() {
    return {
      remainingTime: 120, // 初始倒计时时间（120秒）
      countdownTimer: null, // 计时器实例
      // 当前选中的年份
      selectedYear: 2025,
      // 可选择的年份列表
      years: [2025, 2024, 2023, 2022, 2021],
      OBJkey: { psnNo: '1399001253985', setlId: '300234203', pageNum: 1, pageSize: 30, queryType: 1 },
      OBJ: {
        name: '李维一',
        biaoqian: ['职工基本医疗保险', '大额医疗费用补助', '长期照护保险', '生育保险']
      },
      list: [
        {
          name: '个人账户划账',
          riqi: '2025-08-17',
          zongshouru: '553',
          zongzhichu: '0',
          fukuanduixiang: '--'
        },
        {
          name: '医保消费',
          riqi: '2025-08-10',
          zongshouru: '220',
          zongzhichu: '0',
          fukuanduixiang: '--'
        },
        {
          name: '个人账户划账',
          riqi: '2025-08-5',
          zongshouru: '17.5',
          zongzhichu: '0',
          fukuanduixiang: '--'
        }
      ]
    }
  },
  mounted() {
    this.OBJkey.setlId = this.$route.params.setlId
    // 初始化倒计时
    this.startCountdown()
    // 监听全局操作（点击/按键）重置倒计时
    window.addEventListener('click', this.resetCountdown)
    window.addEventListener('keydown', this.resetCountdown)
    this.queryFeeList()
  },
  beforeDestroy() {
    // 组件销毁时清理计时器和事件监听
    this.clearCountdown()
    window.removeEventListener('click', this.resetCountdown)
    window.removeEventListener('keydown', this.resetCountdown)
  },
  methods: {
    // 查询接口
    queryFeeList() {
      queryFeeList(this.OBJkey)
        .then((res) => {
          console.log('消费列表清单：', res)
          // this.OBJ2 = res.data
        })
        .finally(() => {
          this.$nextTick(() => {
            this.loading = false
          })
        })
    },
    // 可以添加年份切换等事件处理方法
    handleYearChange(year) {
      console.log('选择的年份:', year)
      // 可以在这里添加年份变更后的逻辑，如重新加载数据
    },
    handleCardClick(functionName) {
      this.$router.push({ name: functionName })
    },
    // 启动倒计时
    startCountdown() {
      // 先清除已有计时器，避免重复计时
      this.clearCountdown()

      this.countdownTimer = setInterval(() => {
        this.remainingTime--

        // 倒计时结束：弹出提示
        if (this.remainingTime <= 0) {
          this.clearCountdown()
          this.showTimeoutAlert()
        }
      }, 1000) // 每秒执行一次
    },

    // 清除计时器
    clearCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
        this.countdownTimer = null
      }
    },

    // 重置倒计时（用户有操作时）
    resetCountdown() {
      // 只有倒计时未结束时才重置
      if (this.remainingTime > 0) {
        this.remainingTime = 120
        this.startCountdown() // 重新启动计时
      }
    },

    // 倒计时结束
    showTimeoutAlert() {
      this.$router.push({ name: 'screenMain' })
    }
  }
}
</script>

<style scoped>
.consumer-record-container {
  width: 100%;
  height: 90%;
}

/* 顶部导航样式 */
.header {
  width: 100%;
  padding: 20px 20px;
  border-radius: 4px;
  box-sizing: border-box;
}
.user{
  width: 80px;
  height: 80px;
}
.title {
  width: 87px;
  height: 20px;
}

.logout-tip {
  text-align: right;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.logout-tip2 {
  text-align: left;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
/* 主体内容样式 */
.main-content {
  background-image: url('../../../../assets/image/ytj/juxing.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}

/* 查询标题栏样式 */
.query-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.query-title {
  display: flex;
  align-items: center;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 44px;
  .query-icon{
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}

.query-title i {
  margin-right: 8px;
  font-size: 20px;
}

.year-select {
  width: 120px;
}
/* 汇总卡片样式 */
.summary-card {
  margin-bottom: 20px;
  border-radius: 20px;
  .el-card__header {
    background: #DBE3F6;
    height: 120px;
  }
  .feiyong-main{
    width: 100%;
    height: 45px;
    background: #EBEFF6;
    border-radius: 30px;
    line-height: 45px;
    margin-bottom: 10px;
    .feiyong-icon-m{
      padding-top: 8px;
      margin-left: 10px;
      .feiyong-icon{
        width: 30px;
        height: 30px;
      }
    }
    .feiyong-text{
      margin-left: -20px;
      font-weight: 400;
      font-size: 20px;
      color: #303133;
    }
    .stat-value{
      font-weight: bold;
      font-size: 20px;
      color: #1B65B9;
    }
  }
}
.summary-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #303133;
  font-weight: 500;

  margin-top: 0;
  background: #DBE3F6;
  border-radius: 40px;
}
.hospital-main{
  margin-top: 20px;
  padding: 20px;
  background: #EBEFF6;
  border-radius: 20px;
}
.hospital-name {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #303133;
}

.visit-type {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #e8e8e8;
}
.ptmz{
  width: 80px;
  height: 30px;
  background: #6590F3;
  border-radius: 10px;color: #fff;padding: 0;display: flex;
  justify-content: center;
  align-items: center;
}
.visit-date {
  font-weight: bold;
  font-size: 20px;
  color: #1B65B9;
}

.expense-details {
  margin-bottom: 20px;
}

.expense-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.expense-label {
  color: #909399;
}

.expense-value {
  font-weight: bold;
  font-size: 20px;
  color: #303133;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .summary-stats {
    flex-direction: column;
  }

  .consumption-types {
    flex-direction: column;
  }
}
</style>
